<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>编辑社群简介</h1>
        <span class="rightBtn" style="color: #deaa8a;">确定</span>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="publish">
      <!-- 标题和封面 -->
      <div class="title">
        <textarea
          class="textarea"
          placeholder="请输入标题，32字以内"
          maxlength="32"
        ></textarea>
        <div class="upload">
          <div class="no">
            <span>上传封面<br />（16:9）</span>
          </div>
          <!-- <img class="yes" src="../../assets/images/about.png"/> -->
        </div>
      </div>

      <div class="video" v-if="type == 'video'">
        <!-- 未上传 -->
        <!-- <div class="upload"><img src="../../assets/images/mkf/add.png"/><p>点击上传视频</p></div> -->
        <!-- 上传成功 -->
        <video controls="controls">
          <source
            src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
            type="video/mp4"
          />
          Your browser does not support the video tag.
        </video>
      </div>

      <div class="pdf" v-if="type == 'pdf'">
        <!-- 未上传 -->
        <div class="upload">
          <img src="../../assets/images/mkf/add.png" />
          <p>点击上传pdf</p>
        </div>
        <!-- 上传成功 -->
        <!-- <div class="pdfOk">
					<img src="../../assets/images/mkf/icon_ok.png" />
					<p class="p1">上传成功</p>
					<p class="p2 line1">【PDF】文件名称文件名称</p>
				</div> -->
      </div>

      <div class="imgAndTxt" v-if="type == 'img'">
        <div id="toolbar" slot="toolbar">
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-list" value="ordered" title="有序列表"></button>
          <button class="ql-list" value="bullet" title="无序列表"></button>
          <select class="ql-color" value="color" title="字体颜色"></select>
          <button class="ql-image" title="插入图片"></button>
        </div>
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
        >
        </quill-editor>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data: function() {
    return {
      type: "",
      editor: null, // 富文本编辑器对象
      content: "",
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: "#toolbar"
        },
        theme: "snow",
        placeholder: "请输入正文"
      }
    };
  },
  mounted: function() {
    this.type = this.$route.query.type;
    if (this.type == "img") {
      this.editor = this.$refs.myQuillEditor.quill;
    }
  },
  methods: {},
  beforeDestroy() {
    this.editor = null;
    delete this.editor;
  },
  onEditorBlur() {
    console.log("blur", this.content);
  },
  onEditorFocus() {
    console.log("focus", this.content);
  },
  onEditorReady() {
    console.log("ready", this.content);
  }
};
</script>

<style scoped>
video,
.video {
  display: block;
  width: 4.44rem;
  height: auto;
  border-radius: 0.1rem;
}
.video,
.pdf {
  padding: 0.4rem 0.2rem;
}
.video .upload,
.pdf .upload {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.video .upload img,
.pdf .upload img {
  display: block;
  width: 0.5rem;
  margin-bottom: 0.2rem;
}
.video .upload p,
.pdf .upload p {
  font-size: 0.22rem;
  color: #999;
}
.pdfOk {
  width: 7.1rem;
  height: 2.5rem;
  border-radius: 0.1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 auto;
  padding-top: 0.5rem;
}
.pdfOk img {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  margin: 0 auto;
}
.pdfOk .p1 {
  font-size: 0.28rem;
  line-height: 0.32rem;
  padding-top: 0.14rem;
  text-align: center;
  color: #ffffff;
}
.pdfOk .p2 {
  font-size: 0.24rem;
  line-height: 0.3rem;
  text-align: center;
  color: #fff;
  opacity: 0.3;
  padding: 0.15rem 0.3rem 0;
}
.publish .title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  align-items: flex-start;
}
.publish .title .textarea {
  border: none;
  width: 5rem;
}
.publish .title .upload .no,
.publish .title .upload .yes {
  width: 1.95rem;
  height: 1.1rem;
}
</style>
<style>
.ql-editor {
  font-size: 0.32rem;
  line-height: 0.64rem;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border: none;
}

.ql-toolbar.ql-snow {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.3);
  font-style: normal;
}

.ql-snow .ql-stroke {
  stroke: #666;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #666;
}
</style>
